<template>
    <div>
        <el-button type="primary" @click="openmodel()" size='small'>新增</el-button>
        <!-- @click='showModal' -->
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column type="index" label="序号" width="50" value='id'>
            </el-table-column>
            <el-table-column prop="name" label="分类名称">
            </el-table-column>
            <el-table-column prop="description" label="介绍" width="500">
            </el-table-column>
            <el-table-column prop="no" label="序号">
            </el-table-column>
            <el-table-column label="操作">
                <template v-slot='scope'>
                    <el-button type="primary" @click="updateClassify(scope.row)">修改</el-button>
                    <el-button type="danger" @click='deleteuser(scope.row)'>删除</el-button>
                </template>
            </el-table-column>
        </el-table>

    <!-- model -->
    <el-dialog title="录入分类信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="名称"  >
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="介绍" >
            <el-input
                type="textarea"
                :autosize="{ minRows: 1, maxRows: 4}"
                placeholder="请输入内容"
                v-model="form.description">
            </el-input>
        </el-form-item>
        <el-form-item label="序号" >
            <el-input v-model="form.no" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="insertClassify()">保 存</el-button>
      </div>
    </el-dialog>

    </div>
</template>

<script>
import axios from '@/http/axios'
import moment from 'moment'
import qs from 'qs'
export default {
    data(){
        return {
            tableData:[],
            form:{},
            total:0,
            dialogFormVisible : false
        }
    },
    filters:{
        datemake(str){
            return moment(str).format('YYYY-MM-DD')
        }
    },
    created(){
        this.findAll()
    },
    methods:{
        // 显示资讯分类数据
        findAll(){
            axios({
                url:'http://121.199.29.84:8001/category/findAll',
                method:'get'
            }).then((res)=>{
                // 表格数据
                this.tableData = res.data.data
            })
        },
        //添加资讯分类信息
        insertClassify(){
            axios({
                url:'http://121.199.29.84:8001/category/saveOrUpdate',
                data:qs.stringify(this.form),
                method:'post'
                }).then((res)=>{
                    //刷新用户数据
                    this.findAll()
                    this.$message({
                        message:'保存成功！',
                        type: 'success'
                    });
                })
                //关闭模态框
                this.dialogFormVisible = false
        },
        updateClassify(item){
            this.form=JSON.parse(JSON.stringify(item))
            this.dialogFormVisible = true
        },
        //删除资讯分类信息
        deleteuser(item){
            var obj={
                id:item.id
            }
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                
                axios({
                    url:'http://121.199.29.84:8001/category/deleteById',
                    params:obj,
                    method:'get'
                }).then((res)=>{
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    //刷新用户数据
                    this.findAll()
                })
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        //打开模态框
        openmodel(){
            this.dialogFormVisible = true
            this.form={}
        },
    }
}
</script>